<template>
	<view class="container">
		<u-popup :show="show" mode="right" closeOnClickOverlay>
			<view class="popup-content">
				<view class="base-content">
					<text>时间筛选</text>
					<view class="taglist">
						<view class="tag" v-for="(item, index) in topRadiosClone" :key="index">
							<view :class="item.checked?'checked':'tag-item'" @click.stop="topRadiosClick(item.text)"
								v-model="item.checked">
								<text>{{item.text}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="base-content">
					<text>{{bottomTitle}}</text>
					<view class="taglist">
						<view class="tag" v-for="(item, index) in bottomRadiosClone" :key="index">
							<view :class="item.checked?'checked':'tag-item'" @click.stop="bottomRadiosClick(item)">
								<text>{{item.text}}</text>
								<!-- <u-tooltip :text="item.text" overlay></u-tooltip> -->
							</view>
						</view>
					</view>
				</view>
				<view class="base-content">
					<text>{{childName}}</text>
					<view class="taglist-y">
						<u-list height="300rpx">
							<view class="tag" v-for="(item, index) in childern" :key="index">
								<view :class="item.checked?'checked':'tag-item'" @click.stop="childernClick(item.text)">
									<text>{{item.text}}</text>
									<!-- <u-tooltip :text="item.text" overlay></u-tooltip> -->
								</view>
							</view>
						</u-list>
					</view>
				</view>
				<view class="btns">
					<view class="btn reset" @click.stop="resetQuery">重置</view>
					<view class="btn agree" type="error" @click.stop="queryConfirm">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import _public from "@/common/public.js"
	import _utils from "@/common/_utils.js"
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			bottomRadios: Array,
			topRadios: Array,
			bottomTitle: String
		},
		beforeMount() {
			this.topRadiosClone = uni.$u.deepClone(this.topRadios)
		},
		mounted() {
			this.topRadiosClick(this.topRadios[0].text)
			this.bottomRadiosClick(this.bottomRadios[0])
		},
		watch: {
			bottomRadios() {
				this.bottomRadiosClone = uni.$u.deepClone(this.bottomRadios)
				console.log(this.bottomRadios)
				// this.bottomName=this.bottomRadios[0].text
				this.topRadiosClick(this.topRadiosClone[0].text)
				this.bottomRadiosClick(this.bottomRadiosClone[0])
			},
		},
		name: "right-popup-node-query",
		data() {
			return {
				bottomRadiosClone: [],
				topRadiosClone: [],
				queryTop: '',
				queryBottom: '',
				bottomName: '',
				topName: '',
				childern: [],
				childName: '',
				partId: ''
			};
		},

		methods: {
			resetQuery() {
				this.topRadiosClick(this.topRadiosClone[0].text)
				// this.bottomRadiosClick(this.bottomRadiosClone[0].text)
				this.bottomRadiosClone[0].checked = true
				this.bottomName = this.bottomRadiosClone[0]
				this.childern = []
				this.childName = ''
			},
			async bottomRadiosClick(item) {
				console.log(item)
				let flag = 0
				for (let i = 0; i < this.bottomRadiosClone.length; i++) {
					this.bottomRadiosClone[i].checked = this.bottomRadiosClone[i].text === item.text ? true : false
					if (this.bottomRadiosClone[i].text === item.text)
						flag = i
				}

				if (item.text != "全部") {
					this.bottomName = this.bottomRadiosClone[flag]
					this.childName = this.bottomName.text
					let child = await _public.getByParent(item.rootPartId)
					this.childern = _utils.tranferNode(child)
					this.partId = item.rootPartId
					if (this.childern.length != 0) {
						this.childernClick(this.childern[0].text)
					}
				} else {
					this.bottomRadiosClone[0].checked = true
					this.bottomName = this.bottomRadiosClone[0]
					this.childern = []
					this.childName = ''
				}
			},
			childernClick(name) {
				let flag = 0
				for (let i = 0; i < this.childern.length; i++) {
					this.childern[i].checked = this.childern[i].text === name ? true : false
					if (this.childern[i].text === name)
						flag = i
				}
				this.bottomName = this.childern[flag]
				if (name == "全部") {
					this.bottomName.rootPartId = this.partId
					this.bottomName.partLevel = 2
				}
			},
			topRadiosClick(name) {
				let flag = 0
				for (let i = 0; i < this.topRadiosClone.length; i++) {
					this.topRadiosClone[i].checked = this.topRadiosClone[i].text === name ? true : false
					if (this.topRadiosClone[i].text === name)
						flag = i
				}
				this.topName = this.topRadiosClone[flag]
			},
			queryConfirm() {
				let temp = [this.topName,
					this.bottomName
				]
				console.log(temp)
				this.$emit("click", temp)

			},
		}
	}
</script>

<style lang="scss" scoped>
	.taglist-y {
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.tag {
			margin: 0 5rpx 20rpx 0;

			.tag-item,
			.checked {
				width: 100%;
				display: inline-block;
				line-height: 56rpx;
				border-radius: 28rpx;
				background: #F0F0F0;
				color: #333333;
				text-align: center;
				font-size: 26rpx;
				overflow: hidden;
				/* #ifndef APP-NVUE */
				white-space: nowrap;
				text-overflow: ellipsis;
				/* #endif */
			}

			.checked {
				background: linear-gradient(0deg, #E93423 0%, #FB6858 100%);
				color: #FFFFFF;
			}

		}
	}

	.popup-content {
		width: 560rpx;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		background-color: #fff;
		border: 2rpx solid #efefef;

		.base-content {
			margin-top: 28rpx;
			padding: 20rpx;

			.taglist {
				margin-top: 30rpx;
				display: flex;
				flex-wrap: wrap;
				align-items: flex-start;
				flex-direction: row;

				.tag {
					margin: 0 5rpx 20rpx 0;
				}
			}
		}

		.btns {
			position: fixed;
			display: inline-flex;
			flex-direction: row;
			bottom: 40rpx;
			align-items: center;
			// justify-content: center;
			right: 80rpx;
			border-radius: 20rpx;
			// border: 1rpx solid #EC4C42;

			.btn {
				display: inline-block;
				text-align: center;
				width: 220rpx;
				line-height: 66rpx;
				border: 1rpx solid #EC4C42;
			}

			.agree {
				background: linear-gradient(0deg, #E93423 0%, #FB6858 100%);
				border-radius: 0rpx 33rpx 33rpx 0rpx;
				color: #FFFFFF;
			}

			.reset {
				border-radius: 33rpx 0rpx 0rpx 33rpx;
				color: #EC4C42;
			}
		}
	}

	.tag-item,
	.checked {
		width: 160rpx;
		display: inline-block;
		line-height: 56rpx;
		border-radius: 28rpx;
		background: #F0F0F0;
		color: #333333;
		text-align: center;
		font-size: 26rpx;
		overflow: hidden;
		/* #ifndef APP-NVUE */
		white-space: nowrap;
		text-overflow: ellipsis;
		/* #endif */
	}

	.checked {
		background: linear-gradient(0deg, #E93423 0%, #FB6858 100%);
		color: #FFFFFF;
	}

	.container {
		border-radius: 20rpx 0rpx 0rpx 20rpx;
	}
</style>
